import ProCard from "@ant-design/pro-card";
import {useEffect, useState } from "react";
import { useParams } from "react-router";
import VideoPlayForm from "./videoPlayForm";
import { WaterMark } from "@ant-design/pro-layout";
import {useModel} from "umi";

const VideoForm: React.FC = () => {
  // 用户初始化信息
  const { initialState } = useModel('@@initialState');

  // 获取传入的ID
  const params = useParams();
  const fileId = params["id"]
  const planId = params["planId"]

  // fileUrl
  const [fileUrl, setFileUrl] = useState<string>( "")
  const [logId, setLogId] = useState<number>( 0)

  // TOKEN
  let token = localStorage.getItem('token');

  // 根据文件ID，获取文件信息
  useEffect(() => {
    fetch('/api/user/file/detail?id=' + fileId, {
      method: 'GET',
      headers:{
        'Authorization': `Bearer ${token}`
      }
    }).then(res=>res.json()).then(res => {
      if (res){
        // 拼接后台url
        setFileUrl(res.data?.path)
      }
    })
  }, []);

  // 根据文件ID和计划ID，更新文件查看记录
  useEffect(() => {
    fetch('/api/px/readLog?fileId=' + fileId  + "&planId=" + planId, {
      method: 'GET',
      headers:{
        'Authorization': `Bearer ${token}`
      }
    }).then(res=>res.json()).then(res => {
      if (res){
        console.log(res)
        setLogId(res.data?.logId)
      }
    })
  }, []);

  if (fileUrl){
    return (
      <WaterMark
        rotate={-25}    // 旋转
        // content={getStatusStr(props.values.file_name)}
        // 图片水印 image={}
        content={[ '粤能 ' + initialState?.currentUser?.name, "保密资料，请勿传播"]}
        // image={getStatusImages(props.values.status)}
        // fontColor={'#ffccc7'}
        // fontSize={36}
        // offsetLeft={290} // 左间距
        // offsetTop={230}  // 上间距
        width={150}         // 水印宽度
        height={90}         // 水印高度
        gapX={30}           // 左右水印的间距
        gapY={90}           // 上下水印的间距
        zIndex={9999}       // 水印层级
      >
        <ProCard layout={"center"} style={{backgroundColor: "gray", height: `100vh`, overflow: "hidden"}}>
          <VideoPlayForm fileUrl={fileUrl} logId={logId} planId={planId} />
        </ProCard>
      </WaterMark>
    )
  }return null

}
export default VideoForm;






